<template>
  <div class="home">
    <div class="head">
      <el-row :gutter="10" class="logo">
        <el-col :xs="12" :sm="12" :md="12" :lg="14" :xl="14">
          <div class="left">
            <img
              src="http://www.zhongshe.cc/uploadfiles/2018/12/20181219214305435.jpg"
              alt=""
            />
          </div>
        </el-col>
        <el-col :xs="10" :sm="10" :md="8" :lg="10" :xl="12">
          <div class="right" v-if="showNav">
            <img src="http://www.zhongshe.cc/cn/images/phone.png" />
            <span class="phone">0551-62571376</span>
          </div>
          <div class="navShow" v-else>
            <i class="el-icon-s-operation" @click="drawer = !drawer"></i>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="nav" v-if="showNav">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        router
      >
        <el-menu-item index="/home">首页</el-menu-item>
        <el-submenu index="2">
          <template slot="title">关于中设</template>
          <el-menu-item index="/introductionnpm">公司简介</el-menu-item>
          <el-menu-item index="2-2">组织结构</el-menu-item>
          <el-menu-item index="2-3">关联企业</el-menu-item>
          <el-submenu index="2-4">
            <template slot="title">展会运营</template>
            <el-menu-item index="2-4-1">选项1</el-menu-item>
            <el-menu-item index="2-4-2">选项2</el-menu-item>
            <el-menu-item index="2-4-3">选项3</el-menu-item>
          </el-submenu>
        </el-submenu>

        <el-menu-item index="3">展会运营</el-menu-item>
        <el-menu-item index="4">展览工程</el-menu-item>
        <el-menu-item index="5"
          ><a href="https://www.ele.me" target="_blank"
            >咨询中心</a
          ></el-menu-item
        >
        <el-menu-item index="6">加入中设</el-menu-item>
        <el-menu-item index="7">联系我们</el-menu-item>
      </el-menu>
    </div>
    <div class="content">
      <router-view></router-view>
    </div>
    <div class="foot"></div>
    <el-drawer
      title="我是标题"
      :visible.sync="drawer"
      :before-close="handleClose"
      :with-header="false"
    >
      <el-menu
        :default-active="activeIndex"
        class="el-menu-vertical-demo"
        mode="vertical"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        router
      >
        <el-menu-item index="/home">首页</el-menu-item>
        <el-submenu index="2">
          <template slot="title">关于中设</template>
          <el-menu-item index="2-1">公司简介</el-menu-item>
          <el-menu-item index="2-2">组织结构</el-menu-item>
          <el-menu-item index="2-3">关联企业</el-menu-item>
          <el-submenu index="2-4">
            <template slot="title">展会运营</template>
            <el-menu-item index="2-4-1">选项1</el-menu-item>
            <el-menu-item index="2-4-2">选项2</el-menu-item>
            <el-menu-item index="2-4-3">选项3</el-menu-item>
          </el-submenu>
        </el-submenu>

        <el-menu-item index="3">展会运营</el-menu-item>
        <el-menu-item index="4">展览工程</el-menu-item>
        <el-menu-item index="5"
          ><a href="https://www.ele.me" target="_blank"
            >咨询中心</a
          ></el-menu-item
        >
        <el-menu-item index="6">加入中设</el-menu-item>
        <el-menu-item index="7">联系我们</el-menu-item>
      </el-menu>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      drawer: false,
      activeIndex: "1",
    };
  },
  methods: {
    setSize: function() {
      if (this.screenWidth > 750) {
        this.showNav = true;
      } else {
        this.showNav = false;
      }
    },
    handleClose(done) {
      this.drawer = false;
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
  },
  mounted() {
    // 首次加载时,需要调用一次
    this.screenWidth = window.innerWidth;
    this.setSize();
    // 窗口大小发生改变时,调用一次
    window.onresize = () => {
      this.screenWidth = window.innerWidth;
      this.setSize();
    };
  },
};
</script>

<style lang="scss" scoped>
.head {
  min-width: 300px;
  max-width: 1200px;
  margin: 0px auto;
  .topNav {
  }
  .logo {
    display: flex;
    justify-content: center;
    align-items: center;
    .left {
      img {
        width: 100%;
        height: 100%;
      }
    }
    .navShow {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      font-size: 32rem;
    }
    .right {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      font-size: 18rem;
      img {
        width: 16rem;
        height: 16rem;
      }
      .phone {
      }
      .phone::before {
        content: "";
        border-right: 1px solid #eee;
        margin: 10px;
      }
    }
  }
}
.nav {
  display: flex;
  justify-content: center;
  background-color: #545c64;
}
.el-menu {
  height: 100%;
}
</style>
